<template>
	<view>
		<van-cell-group>
			<van-field required clearable label="书房名称" :value="name" placeholder="请输入书房名称" @change="nameOnChange" />
			<van-field required clearable label="书房地址" readonly :value="address" @tap="chooseLocation()"
				class="disableasas" placeholder="请选择书房地址" />
			<map :markers="markers" @click="chooseLocation()" style="width:100%;height:30vh;" :latitude="latitude"
				:longitude="longitude"></map>
			<van-button type="primary" class="submit_btn" @click="submit">确定</van-button>
		</van-cell-group>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.130.js';
	import cloudApi from "../../common/cloudApi.js"

	export default {
		data() {
			return {
				name: "",
				address: "",
				// 地图
				amapPlugin: null,
				key: 'fbd93a5c84c06442ae76e8e1ce342d98',
				markers: [],
				latitude: "", //纬度
				longitude: "", //经度
				id: ""
			}
		},
		onLoad(option) {
			this.id = option.id
			if (this.id) {
				uni.setNavigationBarTitle({
					title: "修改书房"
				})
			}
		},
		mounted() {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			// 修改
			if (this.id) {
				uni.showLoading({
					title: '获取信息中'
				});
				cloudApi.call({
					name: "getBookshelfsById",
					data: {
						id: this.id,
					},
					success: (res) => {
						this.name = res.result.data.name
						this.address = res.result.data.address
						let marks = {
							address: res.result.data.address,
							name: res.result.data.name,
							longitude: res.result.data.geoPoint.coordinates[0],
							latitude: res.result.data.geoPoint.coordinates[1]
						}
						this.setMarkers(marks)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			} else {
				uni.showLoading({
					title: '获取信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						let res = {
							address: data[0].regeocodeData.formatted_address,
							name: data[0].desc,
							latitude: data[0].latitude,
							longitude: data[0].longitude
						}
						uni.hideLoading();
						this.setMarkers(res)
					}
				});
			}
		},
		methods: {
			nameOnChange(event) {
				this.name = event.detail
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.setMarkers(res)
					}
				})
			},
			/**
			 * 设置定位数据
			 */
			setMarkers(res) {
				this.address = res.name ? `${res.address}-${res.name}` : `${res.address}`
				this.latitude = res.latitude;
				this.longitude = res.longitude;
				let arr = [{
					id: 0,
					longitude: res.longitude,
					latitude: res.latitude,
					name: res.address,
				}, ];
				let markers = [];
				for (var i = 0; i < arr.length; i++) {
					markers = markers.concat({
						id: arr[i].id,
						latitude: arr[i].latitude, //纬度
						longitude: arr[i].longitude, //经度
					});
				}
				this.markers = markers;
			},
			/**
			 * 提交
			 */
			submit() {
				cloudApi.call({
					name: "updateBookShelf",
					data: {
						id: this.id,
						name: this.name,
						address: this.address,
						latitude: this.markers[0].latitude,
						longitude: this.markers[0].longitude,
					},
					success: (data) => {
						uni.showToast({
							icon: "success",
							title: data.result.message
						})
						setTimeout(() => {
							uni.navigateBack({})
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*/deep/ .van-field__label--disabled {*/
	/*color: #646566 !important;*/
	/*color: var(--field-label-color, #646566) !important;*/
	/*}*/
	.submit_btn {
		display: block;
		width: 200px;
		margin: 10px auto;

		/deep/ .van-button--primary {
			width: 100%;
		}
	}
</style>
